<template>
  <div class="dispersed">
    <h3>分散房源中心</h3>
    <el-form ref="ruleForm" :inline="true" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="楼盘名称" prop="name" size="20">
        <el-select v-model="ruleForm.premisesId" filterable placeholder="请选择">
          <el-option
            v-for="item in premises"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >{{item.name}}
          </el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;<el-button type="warning">添加楼盘</el-button>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="ruleForm.publishStatus" @change="publishStatusZH">
          <el-radio value="0" :label="0">整租</el-radio>
          <el-radio value="1" :label="1">合租</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="ruleForm.type">
          <el-radio value="0" :label="0">出租</el-radio>
          <el-radio value="1" :label="1">未出租</el-radio>
        </el-radio-group>
      </el-form-item>
      <br>
      <el-form-item label="楼栋号" prop="buildingNo" size="20">
        <el-input v-model="ruleForm.buildingNo" autocomplete="off" style="width:250px;" placeholder="楼栋号" />
      </el-form-item>
      <el-form-item label="单元号" prop="unitNo" size="20">
        <el-input v-model="ruleForm.unitNo" autocomplete="off" style="width:250px;" placeholder="单元号" />
      </el-form-item>
      <el-form-item label="门牌号" prop="roomNo" size="20">
        <el-input v-model="ruleForm.roomNo" autocomplete="off" style="width:250px;" placeholder="门牌号" />
      </el-form-item>
      <br>
      <el-form-item label="户型" prop="room">
        <el-select v-model="ruleForm.room" placeholder="选择室">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
          <el-option label="7" value="7" />
          <el-option label="8" value="8" />
          <el-option label="9" value="9" />
        </el-select>
      </el-form-item>
      <el-form-item prop="hall">
        <el-select v-model="ruleForm.hall" placeholder="选择厅">
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="装修情况" prop="decorate">
        <el-select v-model="ruleForm.decorate" placeholder="选择装修">
          <el-option label="精装" value="0" />
          <el-option label="简装" value="1" />
          <el-option label="毛坯" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="楼层" prop="floor" size="20">
        <el-input v-model="ruleForm.floor" autocomplete="off" style="width:250px;" placeholder="楼层" />
        共
      </el-form-item>
      <el-form-item prop="floorCount">
        <el-input v-model="ruleForm.floorCount" autocomplete="off" style="width:250px;" placeholder="层" />
        层
      </el-form-item>
      <br>
      <el-form-item label="设置管家" prop="manager">
        <el-select v-model="ruleForm.manager" placeholder="管家">
          <el-option
            v-for="item in housekeeper"
            :key="item.userid"
            :label="item.username"
            :value="item.userId"
          >{{ item.username }}
          </el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="房产面积" prop="createBy" size="20">
        <el-input v-model="ruleForm.createBy" autocomplete="off" style="width:250px;" placeholder="房产面积" />
      </el-form-item>
      <br>
      <el-form-item v-if="wholeRent" label="租金" prop="rental" size="20">
        <el-input v-model="ruleForm.rental" autocomplete="off" style="width:250px;" placeholder="租金" />
      </el-form-item>
      <el-form-item label="付款方式" prop="paymentMortgage">
        押
        <el-select v-model="ruleForm.paymentMortgage" placeholder="押">
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item prop="paymentPay">
        付
        <el-select v-model="ruleForm.paymentPay" placeholder="付">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
        </el-select>
      </el-form-item>
      <br>
      <el-form-item v-if="wholeRent" label="房间配套" prop="privateFacility">
        <el-checkbox-group v-model="ruleForm.privateFacility" @change="handleSelectionPeiTaoChange">
          <el-checkbox v-for="book in pubss" :key="book.id" name="type" value="book.id" :label="book.id">
            {{ book.name }}
          </el-checkbox>

        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="公共配套" prop="publicFacility">
        <el-checkbox-group v-model="ruleForm.publicFacility" @change="handleSelectionChange">
          <el-checkbox v-for="book in priids" :key="book.id" name="type" value="book.id" :label="book.id">
            {{ book.name }}
          </el-checkbox>

        </el-checkbox-group>
      </el-form-item>

      <el-form-item v-if="wholeRent" label="房间区域照片"><!--prop="imageUrlRoom" -->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8200/hou/upload/uploadRoom"
          :show-file-list="false"
          :on-success="handleAvatarRoomSuccess"
          :before-upload="beforeAvatarRoomUpload"
        >
          <img v-if="imageUrlRoom" :src="imageUrlRoom" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <br>
      <el-form-item label="公共区域照片"><!--   prop="imageUrlHose"-->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8200/hou/upload/uploadHose"
          :show-file-list="false"
          :on-success="handleAvatarHoseSuccess"
          :before-upload="beforeAvatarHoseUpload"
        >
          <img v-if="imageUrlHose" :src="imageUrlHose" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <br>
      <el-form-item label="房源介绍" prop="introduce" size="20">
        <el-input v-model="ruleForm.introduce" autocomplete="off" style="width:500px;" />
      </el-form-item>
      <br>
      <el-form-item v-if="sharing">
        <el-button type="warning" @click="dialogFormVisible=true">添加房间</el-button>
      </el-form-item>
      <br>
      <el-form-item>
        <el-button type="warning" @click="submitForm('ruleForm')">立即创建</el-button>
      </el-form-item>
    </el-form>

    <!--===========/////////=======添加集中房源======/////////=========-->
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible"
      width="50%"
      :before-close="handleClose"
    >
      <span>
        <el-form ref="form" :model="formStyle" label-width="80px">
          <el-form-item label="房型名称">
            <el-input v-model="formStyle.acreage" />
          </el-form-item>
          <el-form-item label="面积">
            <el-input v-model="formStyle.proportion" style="width: 50%" />平方米
          </el-form-item>
          <el-form-item label="朝向">
            <el-select v-model="formStyle.direction" placeholder="公共装修情况">
              <el-option label="东" value="0" />
              <el-option label="南" value="1" />
              <el-option label="西" value="2" />
              <el-option label="北" value="3" />
              <el-option label="东南" value="4" />
              <el-option label="西北" value="5" />
              <el-option label="东北" value="6" />
              <el-option label="西南" value="7" />
            </el-select>
          </el-form-item>
          <el-form-item label="独立配套">
            <el-checkbox-group v-model="formStyle.duiliids">
              <el-checkbox
                v-for="item in priidsFang"
                :key="item.id"
                :label="item.id"
                :value="item.id"
              >{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="租金">
            <el-input v-model="formStyle.rental" style="width: 50%" />元/月
          </el-form-item>

          <el-form-item label="图片">
            <el-upload
              action="http://localhost:8200/hou/UploadController/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview1"
              :on-success="handleAvatarSuccess1"
              :on-remove="handleRemove1"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-input v-model="formStyle.imageUrl" hidden />
          </el-form-item>

        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveroominfo">确 定</el-button>
      </span>
    </el-dialog>
    <!--===========/////////=======添加集中房源======/////////=========-->
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      ruleForm: {
        privateFacility: [],
        publicFacility: []
      },
      formStyle: {
        duiliids: [],
        imageUrl: []
      },
      formLabelWidth: '120px',
      pubss: [],
      priids: [],
      priidsFang: [],
      premises: [],
      housekeeper: [],
      Splicing: [],
      rooms: [],
      imageUrlRoom: '',
      imageUrlHose: '',
      dialogFormVisible: false,
      wholeRent: true,
      sharing: false,
      rules: {
        unitNo: [
          { required: true, message: '请输入单元号名称', trigger: 'blur' }
        ],
        room: [
          { required: true, message: '请输入室', trigger: 'blur' }
        ],
        hall: [
          { required: true, message: '请输入厅', trigger: 'blur' }
        ],
        decorate: [
          { required: true, message: '选择装修情况', trigger: 'blur' }
        ],
        floor: [
          { required: true, message: '请选择楼层', trigger: 'blur' }
        ],
        floorCount: [
          { required: true, message: '请选择层', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择管家', trigger: 'blur' }
        ],
        createBy: [
          { required: true, message: '请输入房产面积', trigger: 'blur' }
        ],
        rental: [
          { required: true, message: '请输入押金', trigger: 'blur' }
        ],
        paymentMortgage: [
          { required: true, message: '请输入押几', trigger: 'blur' }
        ],
        paymentPay: [
          { required: true, message: '请输入付几', trigger: 'blur' }
        ],
        privateFacility: [
          { required: true, message: '选择房间配套', trigger: 'blur' }
        ],
        publicFacility: [
          { required: true, message: '选择公共配套', trigger: 'blur' }
        ],
        imageUrlRoom: [
          { required: true, message: '请选择房间区域照片', trigger: 'blur' }
        ],
        imageUrlHose: [
          { required: true, message: '请选择公共区域照片', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入房源介绍', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    this.inifData()
  },
  methods: {
    inifData() {
      // 房间配套
      axios.post('http://localhost:8200/hou/TbPrivateFacilityController/prilist').then((response) => {
        // this.$alert(response.data);
        this.pubss = response.data
        this.priidsFang = response.data
      })
      // 公共配套
      axios.post('http://localhost:8200/hou/TbPublicFacilityController/publiList').then((response) => {
        // this.$alert(response.data);
        this.priids = response.data
      })
      // 楼盘追加
      axios.post('http://localhost:8200/hou/TbPremisesInfoController/list').then((response) => {
        console.log(response.data)
        /* this.premises = response.data;*/
      })

      // 管家追加
      axios.post('http://localhost:8200/sys/user/selall').then((response) => {
        // this.$alert(response.data.obj);
        this.housekeeper = response.data.obj
      })
    },
    submitForm(formName) {
      var s = this.Splicing.join(',')
      var r = this.rooms.join(',')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.publicFacility = s
          this.ruleForm.privateFacility = r
          axios.post('http://localhost:8200/hou/TbHouseInfoController/insert', this.ruleForm).then((res) => {
            if (res.data.code == 200) {
              alert(res.data.msg)
              this.inifData()
            } else {
              alert('添加失败!')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {

    },
    // 拼接公共配套
    handleSelectionChange(val) {
      this.Splicing = new Array()
      for (const noe of val) {
        this.Splicing.push(noe)
      }
    },
    // 拼接房间配套
    handleSelectionPeiTaoChange(val) {
      this.rooms = new Array()
      for (const noe of val) {
        this.rooms.push(noe)
      }
    },
    handleAvatarRoomSuccess(res, file) {
      this.imageUrlRoom = URL.createObjectURL(file.raw)
      this.ruleForm.imgRoom = 'http://localhost:8200/pic/' + file.name
    },
    beforeAvatarRoomUpload(file) {
      return true
    },
    handleAvatarHoseSuccess(res, file) {
      this.imageUrlHose = URL.createObjectURL(file.raw)
      this.ruleForm.imgHone = 'http://localhost:8200/pic/' + file.name
    },
    beforeAvatarHoseUpload(file) {
      return true
    },
    publishStatusZH(val) {
      if (val == 0) {
        this.wholeRent = true
        this.sharing = false
      } else {
        this.wholeRent = false
        this.sharing = true
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    saveroominfo() {
      axios.post('http://localhost:8200/hou/TbHouseStyleController/savehsl', this.formStyle).then((resp) => {
        // eslint-disable-next-line eqeqeq
        if (resp.data.code == 200) {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          })
          this.dialogVisible = false
          this.form = { duiliids: [] }
        } else {
          alert('失败')
        }
      })
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview1(file) {
      console.log(file)
    },
    handleAvatarSuccess1(res) {
      // eslint-disable-next-line eqeqeq
      if (res.code == '500') {
        this.$message({
          message: res.msg,
          type: 'error'
        })
        return
      }
      this.formStyle.imageUrl.push('http://localhost:8200/pic/' + res.o)
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
